<template>
    <div>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-plus" style="margin:10px 0px" @click="showDialog">添加</el-button>
        <!-- 表格组件 
            data:表格组件将来需要展示的数据
            border：边框
            label:显示标题
            width:对应列的宽度
            prop:对应列内容的字段
            align:对齐方式
            注：element ui展示数据是以列为顺序
            -->
        <el-table :data="list">
            <el-table-column type="index" prop="prop" label="序号" width="80px" align="center">
            </el-table-column>
            <el-table-column prop="tmName" label="品牌名称" width="width">
            </el-table-column>
            <el-table-column prop="logoUrl" label="品牌LOGO" width="width">
                <template slot-scope="{row,$index}">
                    <img :src="row.logoUrl" alt="" style="width:100px;height: 100px;">
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
                <template slot-scope="{row,$index}">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark(row)">修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTradeMark(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 
        :current-page:当前页数
        :total：总数据
        :page-size：每一页展示数据
        :page-sizes：设置每一页展示的数据
        layout：实现分页器布局
        pager-count:按钮数量
        size-change
        -->
        <el-pagination style="margin-top:20px;textAlign:center;" @size-change="handleSizeChange"
            @current-change="getPageList" :current-page="page" :total="total" :page-size="limit"
            :page-sizes="[3, 5, 10]" :page-count="7" layout="prev,pager,next,jumper,->,sizes,total">
        </el-pagination>

        <!--  dialog对话框
            :visible.sync="dialogFormVisible"控制对话框显示隐藏
        -->
        <el-dialog :title="tmForm.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogFormVisible">
            <el-form style="width:80%" :model="tmForm" :rules="rules" ref="rulesForm">
                <el-form-item label="品牌名称" label-width="100px" prop="tmName">
                    <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
                    <!-- 这里收集数据不能用v-model,因为不是表单元素
                    action:设置图片上传的地址
                    :on-success:可以检测到图片上传成功,当图片上传成功,会执行一次
                    :before-upload: 可以在上传图片之前,会执行一次 -->
                    <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload_tip">
                            只能上传jpg文件,且不超过500kb
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateTradeMark">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'tradeMark',
    data() {
        var validateTmName = (rule, value, callback) => {
            //自定义校验规则
            if (value.length < 2 || value.length > 10) {
                callback(new Error('品牌名称2-10位'));
            } else {
                callback();
            }
        };
        return {
            //代表分页器第几页
            page: 1,
            //当前页数展示数据条数
            limit: 3,
            //列表展示的数据
            list: [],
            //总数据条数
            total: 0,
            //控制对话框显示隐藏
            dialogFormVisible: false,
            //收集表单数据,对象身上的属性不能随便写，要看文档
            tmForm: {
                tmName: '',
                logoUrl: ''
            },
            //表单验证规则
            rules: {
                //品牌名称的验证规则
                //required:必须要校验字段，（以‘*’显示与否有关），message：提示信息，trigger：用户行为设置（时间的设置：blur、change）
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    //自定义校验规则
                    { validator: validateTmName, trigger: 'change' }
                ],
                //品牌logo的验证规则
                logoUrl: [
                    { required: true, message: '请选择品牌图片' }
                ],
            }
        }
    },
    //组件挂在完毕
    mounted() {
        //获取列表数据方法
        this.getPageList();
    },
    methods: {
        // //获取品牌列表的数据
        async getPageList(pager = 1) {
            this.page = pager
            //解构出参数
            const { page, limit } = this
            //获取品牌列表的接口
            // this.$API.trademark.reqTradeMarkList()
            let result = await this.$API.trademark.reqTradeMarkList(page, limit)
            if (result.code == 200) {
                this.total = result.data.total;
                this.list = result.data.records;
            }
        },
        //分页器每一页需要展示数据条数发生变化时触发
        handleSizeChange(limit) {
            this.limit = limit;
            this.getPageList()
        },
        //点击添加品牌按钮
        showDialog() {
            this.dialogFormVisible = true
            //清除数据
            this.tmForm = {
                tmName: '',
                logoUrl: ''
            }
        },
        //修改品牌
        updateTradeMark(row) {
            this.dialogFormVisible = true
            //将已有的品牌信息赋值给他们Form进行展示
            //tmForm存储即为服务器返回的品牌信息
            //{...row}浅拷贝
            //row时用户选择的品牌信息
            this.tmForm = { ...row };
        },
        //上传图片成功
        handleAvatarSuccess(res, file) {
            //res:上传成功之后返回前端数据
            //file:上传成功之后服务器返回前端数据
            //收集品牌图片数据,因为将来需要带给服务器
            // this.tmForm.logoUrl = URL.createObjectURL(file.raw);
            console.log(res, file);
            this.tmForm.logoUrl = res.data
        },
        //图片上传之前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        //添加或者修改品牌表单校验
        addOrUpdateTradeMark() {
            this.$refs.rulesForm.validate(async (success) => {
                //如果success为真，则判断为真
                if (success) {
                    this.dialogFormVisible = false;
                    //发请求(添加品牌|修改品牌)
                    let result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.tmForm);
                    if (result.code == 200) {
                        //弹出信息:添加品牌成功/修改品牌成功
                        this.$message({
                            type: 'success',
                            message: this.tmForm.id ? '添加品牌成功' : '修改品牌成功'
                        });
                        //添加或者修改品牌成功后,需要再次获取品牌列表进行展示
                        this.getPageList(this.tmForm.id ? this.page : 1);
                    }
                } else {
                    console.log('error submit!!');
                    return false
                }
            })
        },
        //删除品牌仓库
        deleteTradeMark(row) {
            this.$confirm(`确定删除${row.tmName}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //当用户点击确定触发
                //向服务器发请求
                let result = await this.$API.trademark.reqDeleteTradeMark(row.id);
                //删除成功
                if (result.code == 200) {
                    this.$message({
                        type:'success',
                        message: '删除成功!'
                    });
                    //再次获取品牌列表数据
                    this.getPageList(this.list.length>1?this.page:this.page-1)
                }
            }).catch(() => {
                //取消触发
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style>
el-table {
    width: 100%;
}
</style>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>